<template>
  <ContentWrap>
    <div class="headBox flex-s">
      <div class="goBack flex-s" @click="goBack">
        <el-icon><ArrowLeftBold /></el-icon>
        <span class="ml-2 mr-12">返回</span>
      </div>
      <div>安全巡检详情</div>
    </div>
  </ContentWrap>


  <ContentWrap v-if="homeType === 1">
    <div class="content mb-0">
      <div class="content_head flex-s">
        <div class="line"></div>
        <div class="title">基础信息</div>
      </div>
      <div class="content_main">
        <el-row :gutter="16">
          <el-col :span="6">
            <el-form-item label="巡检编号:">{{ formData.data.inspectionSn ? formData.data.inspectionSn : '-' }}</el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="巡检类型:">{{ formData.data.type ? formData.data.type : '-' }}</el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="巡检时间:">{{ formData.data.inspectionTime ? formatDate(formData.data.inspectionTime) : '-' }}</el-form-item>
          </el-col>        
          <el-col :span="6">
            <el-form-item label="巡检人:">{{ formData.data.inspectionEmployeeName ? formData.data.inspectionEmployeeName : '-' }}</el-form-item>
          </el-col>  
          <el-col :span="6">
            <el-form-item label="上传时间:">{{ formData.data.createTime ? formatDate(formData.data.createTime) : '-' }}</el-form-item>
          </el-col>        
          <el-col :span="6">
            <el-form-item label="施工项目:">{{ formData.data.projectTitle ? formData.data.projectTitle : '-' }}</el-form-item>
          </el-col>      
          <el-col :span="6">
            <el-form-item label="项目负责人:">{{ formData.data.projectLeader ? formData.data.projectLeader : '-' }}</el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="所属部门:">{{ formData.data.projectDepartment ? formData.data.projectDepartment : '-' }}</el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="项目时间:">{{ formData.data.projectDate ? formData.data.projectDate : '-' }}</el-form-item>
          </el-col>       
        </el-row>
      </div>
    </div>
    <div class="content">
      <div class="content_head flex-s">
        <div class="line"></div>
        <div class="title">巡检信息</div>
      </div>
      <div class="content_main">
        <div class="flex-s">
          <div class="mr-50 flex-s"><div class="main_lable">巡检状态：</div>
          <el-tag type="success" v-if="formData.data.status === 0">正常</el-tag>
          <el-tag type="danger" v-else-if="formData.data.status === 1">异常</el-tag>
          <el-tag type="warning" v-else>责任整改</el-tag>
        </div>
          <div class="mr-50 flex-s"><div class="main_lable">巡检评分：</div> {{ formData.data.score ? formData.data.score : '-' }}</div>
        </div>
        <div class="mt-12 flex-s">
          <div class="main_lable">巡检附件：</div> 
          <div class="flex-s" v-if="formData.data.fileInfo && formData.data.fileInfo.length > 0">
            <div class="mr-50 flex-s" v-for="item in formData.data.fileInfo" :key="item.url">
              <div v-if="imgTypeList.includes(item.extension)">
                <el-link target="_blank" @click="imgPreview(item.url)">{{ item.filename }}</el-link>
              </div>
              <el-link v-else :href="item.url" target="_blank">{{ item.filename }}</el-link>
            </div>
          </div>
          <div v-else>-</div>
        </div>
        <div class="mt-12 df">
          <div class="main_lable">现场图片：</div> 
          <div class="imgBox flex-s" v-if="formData.data.sitePhotos && formData.data.sitePhotos.length > 0">
            <div v-for="(item,index) in formData.data.sitePhotos" :key="item">
              <el-image
                style="width: 200px; height: 100px"
                class="mr-30 mb-24"
                :src="item"
                :preview-src-list="formData.data.sitePhotos"
                :initial-index="index"
                show-progress
              />
            </div>
          </div>
          <div v-else>-</div>
        </div>
        <div class="mt-12 df">
          <div class="main_lable flex-e">备注：</div> 
          <div class="flex-s">{{ formData.data.remark ? formData.data.remark : '-' }}</div>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="content_head flex-s">
        <div class="line"></div>
        <div class="title">责任整改信息</div>
      </div>
      <div class="content_main">
        <div class="flex-s">
          <div class="mr-50 flex-s">
            <div class="main_lable">整改部门：</div>
            {{ formData.data.rectifierDept ? formData.data.rectifierDept : '-' }}
          </div>
          <div class="mr-50 flex-s">
            <div class="main_lable">整改人：</div> 
            {{ formData.data.rectifierEmployeeName ? formData.data.rectifierEmployeeName : '-' }}
          </div>
        </div>
        <div class="mt-12 flex-s">
          <div class="main_lable">整改附件：</div> 
          <div class="flex-s" v-if="formData.data.rectifierFileInfo && formData.data.rectifierFileInfo.length > 0">
            <div class="mr-50 flex-s" v-for="item in formData.data.rectifierFileInfo" :key="item.url">
              <div v-if="imgTypeList.includes(item.extension)">
                <el-link target="_blank" @click="imgPreview(item.url)">{{ item.filename }}</el-link>
              </div>
              <el-link v-else :href="item.url" target="_blank">{{ item.filename }}</el-link>
            </div>
          </div>
          <div v-else>-</div>
        </div>
        <div class="mt-12 df">
          <div class="main_lable flex-e">整改原因：</div> 
          <div class="flex-s">{{ formData.data.rectifierCase ? formData.data.rectifierCase : '-' }}</div>
        </div>
        <div class="mt-12 df">
          <div class="main_lable flex-e">整改要求：</div> 
          <div class="flex-s">{{ formData.data.rectifierRequirements ? formData.data.rectifierRequirements : '-' }}</div>
        </div>
      </div>
    </div>
  </ContentWrap>

  <ContentWrap v-else>
    <el-tabs v-model="activeTab" @tab-click="e => activeTab = e.props.name">
    <el-tab-pane label="详情" :name="1">
      <div class="content mb-0">
        <div class="content_head flex-s">
          <div class="line"></div>
          <div class="title">基础信息</div>
        </div>
        <div class="content_main">
          <el-row :gutter="16">
            <el-col :span="6">
              <el-form-item label="巡检编号:">{{ formData.data.inspectionSn ? formData.data.inspectionSn : '-' }}</el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="巡检类型:">{{ formData.data.type ? formData.data.type : '-' }}</el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="巡检时间:">{{ formData.data.inspectionTime ? formatDate(formData.data.inspectionTime) : '-' }}</el-form-item>
            </el-col>        
            <el-col :span="6">
              <el-form-item label="巡检人:">{{ formData.data.inspectionEmployeeName ? formData.data.inspectionEmployeeName : '-' }}</el-form-item>
            </el-col>  
            <el-col :span="6">
              <el-form-item label="上传时间:">{{ formData.data.createTime ? formatDate(formData.data.createTime) : '-' }}</el-form-item>
            </el-col>        
            <el-col :span="6">
              <el-form-item label="施工项目:">{{ formData.data.projectTitle ? formData.data.projectTitle : '-' }}</el-form-item>
            </el-col>      
            <el-col :span="6">
              <el-form-item label="项目负责人:">{{ formData.data.projectLeader ? formData.data.projectLeader : '-' }}</el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="所属部门:">{{ formData.data.projectDepartment ? formData.data.projectDepartment : '-' }}</el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="项目时间:">{{ formData.data.projectDate ? formData.data.projectDate : '-' }}</el-form-item>
            </el-col>       
          </el-row>
        </div>
      </div>
      <div class="content">
        <div class="content_head flex-s">
          <div class="line"></div>
          <div class="title">巡检信息</div>
        </div>
        <div class="content_main">
          <div class="flex-s">
            <div class="mr-50 flex-s"><div class="main_lable">巡检状态：</div>
            <el-tag type="success" v-if="formData.data.status === 0">正常</el-tag>
            <el-tag type="danger" v-else-if="formData.data.status === 1">异常</el-tag>
            <el-tag type="warning" v-else>责任整改</el-tag>
          </div>
            <div class="mr-50 flex-s"><div class="main_lable">巡检评分：</div> {{ formData.data.score ? formData.data.score : '-' }}</div>
          </div>
          <div class="mt-12 flex-s">
            <div class="main_lable">巡检附件：</div> 
            <div class="flex-s" v-if="formData.data.fileInfo && formData.data.fileInfo.length > 0">
              <div class="mr-50 flex-s" v-for="item in formData.data.fileInfo" :key="item.url">
                <div v-if="imgTypeList.includes(item.extension)">
                  <el-link target="_blank" @click="imgPreview(item.url)">{{ item.filename }}</el-link>
                </div>
                <el-link v-else :href="item.url" target="_blank">{{ item.filename }}</el-link>
              </div>
            </div>
            <div v-else>-</div>
          </div>
          <div class="mt-12 df">
            <div class="main_lable">现场图片：</div> 
            <div class="imgBox flex-s" v-if="formData.data.sitePhotos && formData.data.sitePhotos.length > 0">
              <div v-for="(item,index) in formData.data.sitePhotos" :key="item">
                <el-image
                  style="width: 200px; height: 100px"
                  class="mr-30 mb-24"
                  :src="item"
                  :preview-src-list="formData.data.sitePhotos"
                  :initial-index="index"
                  show-progress
                />
              </div>
            </div>
            <div v-else>-</div>
          </div>
          <div class="mt-12 df">
            <div class="main_lable flex-e">巡检情况：</div> 
            <div class="flex-s">{{ formData.data.inspectionCase ? formData.data.inspectionCase : '-' }}</div>
          </div>
        </div>
      </div>
      <div class="content">
        <div class="content_head flex-s">
          <div class="line"></div>
          <div class="title">责任整改信息</div>
        </div>
        <div class="content_main">
          <div class="flex-s">
            <div class="mr-50 flex-s">
              <div class="main_lable">整改部门：</div>
              {{ formData.data.rectifierDept ? formData.data.rectifierDept : '-' }}
            </div>
            <div class="mr-50 flex-s">
              <div class="main_lable">整改人：</div> 
              {{ formData.data.rectifierEmployeeName ? formData.data.rectifierEmployeeName : '-' }}
            </div>
          </div>
          <div class="mt-12 flex-s">
            <div class="main_lable">整改附件：</div> 
            <div class="flex-s" v-if="formData.data.rectifierFileInfo && formData.data.rectifierFileInfo.length > 0">
              <div class="mr-50 flex-s" v-for="item in formData.data.rectifierFileInfo" :key="item.url">
                <div v-if="imgTypeList.includes(item.extension)">
                  <el-link target="_blank" @click="imgPreview(item.url)">{{ item.filename }}</el-link>
                </div>
                <el-link v-else :href="item.url" target="_blank">{{ item.filename }}</el-link>
              </div>
            </div>
            <div v-else>-</div>
          </div>
          <div class="mt-12 df">
            <div class="main_lable flex-e">整改原因：</div> 
            <div class="flex-s">{{ formData.data.rectifierCase ? formData.data.rectifierCase : '-' }}</div>
          </div>
          <div class="mt-12 df">
            <div class="main_lable flex-e">整改要求：</div> 
            <div class="flex-s">{{ formData.data.rectifierRequirements ? formData.data.rectifierRequirements : '-' }}</div>
          </div>
        </div>
      </div>
    </el-tab-pane>
    <el-tab-pane label="整改措施" :name="2">
      <div class="content">
        <div class="content_head flex-s">
          <div class="line"></div>
          <div class="title">整改措施</div>
        </div>
        <div class="content_main">
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="整改人">
                <div class="formInp flex-s">
                  <el-input v-model="formData.data.rectifierBackstageEmployeeName" class="formInp" disabled placeholder="请选择整改人" />
                  <el-button class="ml-12" type="primary" @click="checkPersonnel">
                    {{ formData.data.rectifierBackstageEmployeeName ? '修改整改人' : '选择整改人' }}
                  </el-button>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="整改时间">
                <el-date-picker
                  style="width: 100%"
                  v-model="formData.data.rectifierBackstageTime"
                  type="date"
                  placeholder="请选择整改时间"
                  @change="e => formData.data.rectifierBackstageTime = formatDateToYMD(e)"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="整改结果">
                <el-select v-model="formData.data.rectifierRes" placeholder="请选择整改结果">
                  <el-option label="待整改" :value="0" />
                  <el-option label="整改完成" :value="1" />
                  <el-option label="无法完成" :value="2" />
                </el-select>
              </el-form-item>
            </el-col>   
            <el-col :span="12">
              <el-form-item label="备注">
                <el-input
                  v-model="formData.data.remark"
                  type="textarea"
                  :autosize="{ minRows: 8}"
                  placeholder="请输入备注信息"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="上传附件">
                <div class="upload_box" style="width: 100%;">
                  <UploadFile
                    v-model="formData.data.rectifierBackstageFileInfo"
                    class="upload-demo"
                    :fileSize="20"
                    :fileType="['jpg', 'png', 'pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt']"
                    :limit="10"
                  />
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-tab-pane>
    </el-tabs>
  </ContentWrap>
  <ContentWrap class="flex-c" v-if="activeTab === 2">
    <el-button type="primary" :loading="loading" @click="submitForm(0)">保存</el-button>
    <el-button type="primary" :loading="loading" @click="submitForm(1)">保存并提交</el-button>
  </ContentWrap>


  <!-- 合作单位弹窗 - 勾选数据 -->
  <personalDialog ref="personalDialogRef" @change="personalChange"/>

  <!-- 图片预览 -->
  <el-image-viewer
    v-if="showImagePreview"
    :zoom-rate="1.2"
    @close="closePreview"
    :url-list="[imgPreviewUrl]"
  />
</template>
<script setup>

  import {ref, reactive, inject} from "vue"
  import * as ContractApi from '@/api/viewsApi/contract'
  import { formatDateToYMD } from '@/utils/index'
  import { getSafetyDetail, editSafety } from '@/api/viewsApi/safety'
  import { ArrowLeftBold } from '@element-plus/icons-vue'
  import { formatDate } from '@/utils/formatTime'
  import personalDialog from './personalDialog.vue'
  import { UploadFile } from "@/components/UploadFile/index.ts"
  import * as PersonnelApi from '@/api/system/personnel'
  const router = useRouter()
  const message = useMessage() // 消息弹窗
  const goBack = inject('goBack', () => {})
  const formData = reactive({
    data: {
      inspectionSn: '', // 巡检编号
      type: '', // 巡检类型
      inspectionTime: '', // 巡检时间
      inspectionEmployeeName: '', // 巡检人
      createTime: '', // 上传时间
      projectTitle: '', // 施工项目
      projectLeader: '', // 项目负责人
      projectDepartment: '', // 所属部门
      projectDate: '', // 项目时间
      status: '', // 巡检状态
      score: '', // 巡检评分
      fileInfo: [], // 巡检附件
      inspectionCase: '', // 巡检情况
      rectifierDept: '', // 整改部门
      rectifierEmployeeName: '', // 整改人
      rectifierFileInfo: [], // 整改附件
      rectifierCase: '', // 整改原因
      rectifierRequirements: '', // 整改要求
      
      rectifierBackstageEmployeeId: '', // 整改人Id
      rectifierBackstageEmployeeName: '', // 整改人
      rectifierBackstageEmployeePhone: '', // 整改人手机号
      rectifierBackstageTime: '', // 整改时间
      rectifierRes: '', // 整改结果
      remark: '', // 备注
      rectifierBackstageFileInfo: [], // 整改附件
    }
  })
  const loading = ref(false)
  const pageStatus = ref(1) // 1新增  2编辑
  const imgTypeList = ['jpg', 'jpeg', 'png', 'webp']
  
  const personnelList = ref([]) // 人员信息列表-内部员工

  const homeType = ref(null)
  const activeTab = ref(1)
  /** 初始化 **/
  /** 查询详情信息 */
  const init = async (type, id) => {
    homeType.value = type
    loading.value = true
    try {
      const data = await getSafetyDetail(id)
      data.rectifierBackstageFileInfo = data.rectifierBackstageFileInfo.map(item => {
        return item.url
      })
      formData.data = data
    } finally {
      loading.value = false
    }
  }

  const personalDialogRef = ref(null)
  const checkPersonnel = () => {
    personalDialogRef.value.init()
  }
  const personalChange = (data) => {
    const { id, name, phone, } = data
    formData.data.rectifierBackstageEmployeeId = id
    formData.data.rectifierBackstageEmployeeName = name
    formData.data.rectifierBackstageEmployeePhone = phone
   console.log(data, '选中的人员数据。。。');
   
  }

  const showImagePreview = ref(false)
  const imgPreviewUrl = ref('')
  const imgPreview = (url) => {
    imgPreviewUrl.value = url
    showImagePreview.value = true
  }

  const closePreview = () => {
    imgPreviewUrl.value = ''
    showImagePreview.value = false
  }


  const goSpecial = (item) => {
    router.push({
      path: '/construction/specialWork/index',
      query: {
        id: item,
      }
    })
  }

  const submitForm = async (isSave) => {
    const { 
      id,
      rectifierBackstageEmployeeId, 
      rectifierBackstageEmployeeName,
      rectifierBackstageEmployeePhone,
      rectifierBackstageTime, 
      rectifierRes,
      remark,
      rectifierBackstageFileInfo, 
    } = formData.data

    if(!rectifierBackstageEmployeeId){
      message.error('请选择整改人')
      return
    }
    if(!rectifierBackstageTime){
      message.error('请选择整改时间')
      return
    }
    if(!rectifierRes){
      message.error('请选择整改结果')
      return
    }
    if(!remark){
      message.error('请输入备注')
      return
    }
    if(rectifierBackstageFileInfo.length === 0){
      message.error('请上传整改附件')
      return
    }

    let newFileList = []
    rectifierBackstageFileInfo.forEach(item => {
      newFileList.push({
        url: item,
        filename: item.slice(item.lastIndexOf('/') + 1),
        extension: item.slice(item.lastIndexOf('.') + 1),
      })
    })


    loading.value = true
    const parmsData = {
      id,
      rectifierBackstageEmployeeId, 
      rectifierBackstageEmployeeName,
      rectifierBackstageEmployeePhone,
      rectifierBackstageTime, 
      rectifierRes,
      remark,
      rectifierBackstageFileInfo: newFileList, 
      rectifierSubmitted: isSave,
    }
    try {

      await editSafety(parmsData)
      message.success(isSave ? '保存成功' : '提交成功')
      goBack(1)
    } finally {
      loading.value = false
    }
  }

  defineExpose({
    init,
  })
</script>
<style lang="scss" scoped>
  .content{
      width: 100%;
      min-height: 80px;
      padding: 6px;
      margin-bottom: 24px;
      box-sizing: border-box;
      .content_head {
          margin-bottom: 24px;
          .line {
              width: 5px;
              height: 21px;
              background: #50B5FF;
          }
          .title {
              font-size: 18px;
              color: #333;
              margin-left: 12px;
              font-weight: 600;
          }
      }
      .content_main {
          width: 100%;
          padding: 0 16px;
          box-sizing: border-box;
          font-size: 14px;
      }
  }
  ::v-deep .el-form-item{
    width: 100%;
  }
  .formInp{
    width: 100%;
  }

  .headBox{
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 14px;
    color: #1D1D1D;
  }

  .goBack {
      cursor: pointer;
  }
  .main_title {
    background: #e6e4e4;
    border-radius: 6px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 14px;
    padding: 6px 12px;
    box-sizing: border-box;
    color: #1D1D1D;
  }
  .imgBox{
    width: calc(100% - 72px);
    flex-wrap: wrap;
  }
  .demo-image__error .image-slot {
    font-size: 30px;
  }
  .demo-image__error .image-slot .el-icon {
    font-size: 30px;
  }
  .demo-image__error .el-image {
    width: 100%;
    height: 200px;
  }
  .main_lable{
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 14px;
    width: 72px;
    color: #1D1D1D;
  }

</style>
